<template>
   <div>
     <template v-for="item in children">
        <div v-if="level<2" :key="item.id" class="wrapper">
            <div class="left">
                <el-tag type="success" closable @close="$emit('close',item)">
                    {{item.authName}}
                </el-tag>
            </div>
            <div class="right">
                <Tags 
                v-on="$listeners"
                v-if="item.children"
                :children="item.children"
                :level="level+1"/>
            </div>
        </div>
        <el-tag type="warning" v-else :key="item.id" closable @close="$emit('close',item)">
           {{item.authName}}
        </el-tag>
     </template>
    
   </div>
</template>

<script>
    export default {
        name:"Tags",
        props:{
            /**
             * 要渲染的数据
             */
            children:Array,
            /**
             * 层级
             */
            level:{
                type:Number,
                default:0,
            },
        },
    };
</script>

<style lang="scss" scoped>
.wrapper{
    display: flex;
    border: 1px solid #eee;
    .left{
        padding: 20px;
        display: flex;
        align-items: center;
        text-align: center;
    }
    .right{
        flex: 1;
        display: flex;
        align-items: center;
        .el-tag{
          margin-left: 10px;
        }
    }
}
</style>